<template>
  <div>
    <el-card class="box-card">
      <div class="card">
        <div class="img">
          <img src='../../assets/book.png'>
        </div>
        <div class="textName">{{test_paper.testName}}</div>
        <div class="teacher">出卷人：{{test_paper.testFounder}}</div>
        <div class="fraction">总分：{{test_paper.totalScore}}</div>
        <div class="uptime">发布时间：{{test_paper.createTime}}</div>
        <div class="describe">
          <nobr class="desnobr">描述：{{test_paper.testDescription}}</nobr>
        </div>
        <div class="buttons">
          <router-link :to="{path:'exam',query:{testUuid:test_paper.testUuid,testName:test_paper.testName}}" v-if='test_paper.score==-1'>
            <el-button class="elbtn" type="primary" size="mini">开始答卷</el-button>
          </router-link>
          <router-link :to="{path:'fraction',query:test_paper}" v-if='test_paper.score>=0'>
            <el-button class="elbtn" type="primary" size="mini" plain>查看分数</el-button>
          </router-link>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
  // import ecard from './card'
  export default {
    props: ['test_paper'],
    name: 'Exampaper',
    data() {
      return {

      }
    },
    methods: {

    }
  }
</script>

<style scoped>
  .el-button {
    width: 100%;
  }

  .box-card {
    margin: 10px;
  }

  .img {
    grid-area: img;
    /*overflow: hidden;*/
  }

  .title {
    grid-area: title;
    font-size: 25px;
    font-weight: bold;
  }

  .textName {
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .teacher,
  .fraction,
  .uptime,
  .describe {
    font-size: 20px;
    line-height: 100%;
  }

  .teacher {
    grid-area: teacher;
  }

  .fraction {
    grid-area: fraction;
  }

  .uptime {
    grid-area: uptime;
  }

  .describe {
    grid-area: describe;
    overflow: hidden;
  }

  .desnobr {
    overflow: hidden;
    /*超出部分省略*/
    display: -webkit-box !important;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }

  .buttons {
    grid-area: buttons;
    display: flex;
    flex-direction: row-reverse;
  }

  .elbtn {
    /*    color: #71cbff;
    background-color: #e3f5ff; */
    /* float: right; */
    border-radius: 5px;
    /* width: 25%; */
  }

  .card {
    display: grid;
    grid: 'img title title title title''img teacher fraction uptime buttons''img describe describe describe describe';
    grid-gap: 1px;
    height: 130px;
  }

  .img>img {
    width: 130px;
    height: 130px;
    background-color: steelblue;
  }

  .card>div {
    /*background-color: rgba(93, 255, 223, 0.8);*/
    text-align: left;
  }

  @media screen and (max-width: 900px) {

    .img,
    .placeholder {
      display: none;
    }

    .title {
      font-size: 16px;
    }

    .teacher,
    .fraction,
    .uptime,
    .desnobr {
      font-size: 12px;
    }

    .elbtn {
      margin-top: 0;
      height: 100%;
    }

    .card {
      display: grid;
      grid:
        'title title title'
        'teacher fraction buttons'
        'uptime uptime buttons'
        'describe describe describe';
      grid-gap: 5px;
      height: 100%;
    }
  }
</style>
